<template>
<div>
    <h2>展示页面</h2>
    <table>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>price</td>
            <td>img</td>
            <td>cate</td>
            <td>content</td>
        </tr>
        <tr v-for="i in items" :key="i.id"> 
            <td>{{i.id}}</td>
            <td>{{i.name}}</td>
            <td>{{i.price}} 元</td>
            <td>{{i.img}}</td>
            <td>{{i.cate}}</td>
            <td>{{i.content}}</td>
        </tr>
    </table>
    <p>
        <button @click="first_page()">首页</button>
        <button @click="up_page()">上一页</button>
        <button v-for="p in page_list" @click="get_page(p)" :key="p">{{p}}</button>
        <button @click="down_page()">下一页</button>
        <button @click="last_page()">尾页</button>
    </p>


    
    </div>
</template>

<script>
import axios from "axios"
export default {
    name:"showgoods",
    data() {
        return {
            all_page:"",
            page_list:[],
            p:1,
            items:[],
        }
    },
    methods:{
        get_goods(){
            var data={"page":this.p}
            console.log(1111111)
            axios({
                url:"http://127.0.0.1:8000/app01/page/",
                method:"get",
                params:data
            }).then(res=>{
                console.log(res.data)
                this.items = res.data.data
                this.page_list = res.data.page_list
                this.all_page = res.data.all_page
            })
        },
        first_page(){
            if(this.p=1){
                this.get_goods()
            }
        },
        up_page(){
            if(this.p>1){
                this.p-=1
                this.get_goods()
            }else{
                this.get_goods()
            }
        },
        get_page(p){
            this.p = p
            this.get_goods()
        },
        down_page(){
            if(this.p<this.all_page){
                this.p+=1
                this.get_goods()
            }else{
                this.get_goods()
            }
        },
        last_page(){
             if(this.p=this.all_page){
                this.get_goods()
            }
        },
        
    


    },
    created(){
        this.get_goods()
    }
}
</script>

<style>

</style>
